<template>
<div :class="[$style.container]">
  <el-tabs v-model="value">
    <el-tab-pane label="通知" name="notice">
      <notice-list></notice-list>
    </el-tab-pane>
    <!-- <el-tab-pane label="@我" name="at">
      <empty-data>暂无消息</empty-data>
    </el-tab-pane>
    <el-tab-pane label="私信" name="message">
      <empty-data>暂无消息</empty-data>
    </el-tab-pane> -->
  </el-tabs>
  <div :class="[$style.actions]">
    <el-link :underline="false" type="primary" @click="onReturn">返回 >></el-link>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import NoticeList from './components/notice-list/index.vue'

@Component({
  components: { NoticeList }
})
export default class Message extends Vue {
  value = 'notice'

  onReturn () {
    if (history.length > 0) {
      this.$router.go(-1)
    } else {
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;
}

.actions {
  position: absolute;
  top: 8px;
  right: 20px;
}
</style>
